<template>
  <div class="header flex">
    <!-- 左 -->
    <div class="header-left ml-[30px] flex items-center">
      <!-- <img class="header-left-logo" src="@/assets/img/logo.png" /> -->
      <img class="block w-[230px]" alt="Vue logo" src="~@/assets/logo1.png" />
      <el-divider direction="vertical" />
      <span class="header-left-title text-[14px] ml-[5px]">{{ title }}</span>
    </div>
    <!-- 中 -->
    <div class="header-center flex items-center ml-[30px] pt-[18px] pb-[18px]">
      <div
        v-for="(item, index) in menuList"
        :key="index"
        class="header-center-ul-item ml-[25px] mr-[25px] pt-[10px] pb-[10px]"
        :class="activeMenuID === item.id ? 'header-center-ul-item-active' : ''"
        @click="handleClickTopMenu(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const title = "融合门户";
const userName = "超级管理员";
let activeMenuID = ref(1);
const menuList = reactive([
  { id: 1, name: "教师页面", url: "/portal/teacher" },
  { id: 2, name: "学生页面", url: "" },
  { id: 3, name: "应用中心", url: "" },
  { id: 4, name: "办事中心", url: "" }
]);
const handleClickTopMenu = item => {
  activeMenuID.value = item.id;
  router.push({ path: item.url });
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  color: var(--color-header-text);
  background: var(--color-header-background-1);
  &-center {
    &-ul-item {
      color: var(--color-header-text-secondary);
      &-active,
      &:hover {
        color: var(--color-header-text-active);
        cursor: pointer;
        border-bottom: 2px solid var(--color-header-text-active);
      }
    }
  }
}
</style>
